<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>银行卡设置</span>
      </div>
      <!-- 已经添加的银行卡的盒子 -->
      <div v-if="bankCardList.length" class="bankCard-list">
        <!-- 是否编辑的选择器 -->
        <el-checkbox class="edit-btn" v-model="is_edit">编辑</el-checkbox>
        <!-- 已添加的银行卡容器 -->
        <div class="card-box">
          <div
            v-for="(item, index) in bankCardList"
            :key="index"
            style="position: relative"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              class="delete-btn"
              circle
              v-if="is_edit"
              size="mini"
              @click="deleteCard(item.cardNum)"
            ></el-button>
            <div class="card-info">
              <span>{{ item.bankName }}</span>
              <span>{{ item.cardNum }}</span>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
      <!-- 添加银行卡的盒子 -->
      <div class="new-card-box">
        <div class="add-card" @click="dialogFormVisible = true">
          <span><i class="el-icon-plus"></i></span>
          <span>添加银行卡</span>
        </div>
      </div>
    </el-card>
    <el-dialog
      title="添加银行卡"
      :visible.sync="dialogFormVisible"
      width="30%"
      center
    >
      <el-form
        ref="bankCardForm"
        :rules="rules"
        :model="bankCardForm"
        :label-width="formLabelWidth"
      >
        <el-form-item label="持卡人" prop="holder">
          <el-input v-model="bankCardForm.holder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="银行" prop="openingBank">
          <el-select
            v-model="bankCardForm.openingBank"
            placeholder="请选择开户行"
            style="width: 100%"
          >
            <el-option label="中国银行" value="中国银行"></el-option>
            <el-option label="农业银行" value="农业银行"></el-option>
            <el-option label="工商银行" value="工商银行"></el-option>
            <el-option label="建设银行" value="建设银行"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户行" prop="bankBranch">
          <el-input
            v-model="bankCardForm.bankBranch"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="cityId">
          <el-cascader
            placeholder="请选择"
            v-model="bankCardForm.cityId"
            :options="options"
            @change="handleChange"
            style="width: 100%"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="银行卡号" prop="cardNum">
          <el-input
            v-model="bankCardForm.cardNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit('bankCardForm')"
          >添加</el-button
        >
        <el-button @click="onCancel('bankCardForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    // 银行卡校验器
    var validateCardNum = (rule, value, callback) => {
      const regAmount = /\d{19}$/;
      if (regAmount.test(value)) {
        callback();
      } else {
        callback(new Error("请输入19位数字的银行卡号"));
      }
    };
    return {
      // 城市级联选择器的数据
      options: regionData,
      formLabelWidth: "80px",
      // 添加银行卡的表单数据
      bankCardForm: {
        // 持卡人
        holder: "",
        // 开户行
        openingBank: "",
        // 支行
        bankBranch: "",
        // 城市编号
        cityId: "",
        // 银行卡号
        cardNum: "",
      },
      // 控制添加银行卡对话框的开关
      dialogFormVisible: false,
      is_edit: false,
      rules: {
        holder: [{ required: true, trigger: "blur", message: "请填写持卡人" }],
        openingBank: [
          { required: true, trigger: "change", message: "请选择开户银行" },
        ],
        bankBranch: [
          { required: true, trigger: "blur", message: "请填写开户支行" },
        ],
        cityId: [
          { required: true, trigger: "change", message: "请选择开户城市" },
        ],
        cardNum: [
          { required: true, message: "请选择借款期限", trigger: "change" },
          {
            validator: validateCardNum,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions({
      getBankCard: "card/getBankCard",
      addBankCard: "card/addBankCard",
      delBankCard: "card/delBankCard",
    }),
    // 删除银行卡
    deleteCard(cardNum) {
      this.$confirm("确定删除此银行卡?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var del_card = { cardNum: cardNum };
        this.delBankCard(del_card).then((res) => {
          this.$message({
            message: "删除银行卡成功",
            type: "success",
          });
          this.getBankCard()
        });
      });
    },
    // 级联选择器的选择回调方法
    handleChange(value) {
      console.log(value);
      this.bankCardForm.cityId = value[2];
    },
    // 提交表单
    submit(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          this.addBankCard(this.bankCardForm).then((res) => {
            this.$message({
              message: "添加银行卡成功",
              type: "success",
            });
            this.onCancel("bankCardForm");
            this.getBankCard();
          });
        } else {
          console.log("校验失败");
        }
      });
    },
    // 隐藏弹出表单和重置表单
    onCancel(formname) {
      this.dialogFormVisible = false;
      this.$refs[formname].resetFields();
    },
  },
  computed: {
    // 银行卡列表
    ...mapGetters(["bankCardList"]),
  },
  created() {
    this.getBankCard();
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .dialog-footer {
    text-align: left;
    margin-left: 90px;
  }
  .box-card {
    .new-card-box {
      .add-card {
        width: 200px;
        height: 120px;
        background-color: #67c23a;
        border-radius: 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px 14px;
      }
    }
    .bankCard-list {
      position: relative;
      .edit-btn {
        position: absolute;
        right: 5px;
        top: -15px;
      }
      .card-box {
        display: flex;
        flex-wrap: wrap;
        .delete-btn {
          position: absolute;
          right: 24px;
          top: 14px;
        }
        .card-info {
          width: 200px;
          height: 120px;
          background-color: #cedfff;
          border-radius: 5%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 8px 14px;
        }
      }
    }
  }
}
</style>